<template>
  <div class="dragon">
    <el-col class="tit">
      <el-col tag="strong" :span="2">现金券管理</el-col>
    </el-col>
    <el-col>
      <el-col>
        <el-form
          :model="form"
          ref="form"
          :inline="true"
          size="small"
          label-width="140px"
        >
          <el-form-item label="代金券金额：">
            <el-input
              v-model="form.money"
              type="number"
              placeholder="请输入代金券金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="代金券数量：">
            <el-input
              v-model="form.number"
              type="number"
              placeholder="请输入代金券数量"
            ></el-input>
          </el-form-item>
          <el-form-item label="代金券有效期：">
            <el-date-picker
              v-model="form.term"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit"
              >立即创建</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col class="center">
        <el-table :data="datalist" size="small" border stripe>
          <el-table-column
            v-for="col in columns"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            :width="col.width"
          ></el-table-column>
          <el-table-column label="是否兑换">
            <template slot-scope="scope">
              <template v-if="scope.row.status == 1">已兑换</template>
              <template v-if="scope.row.status == 0">未兑换</template>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <template v-if="scope.row.re_status == 1">可用</template>
              <template v-if="scope.row.re_status == 0">不可用</template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.re_status == 1"
                size="mini"
                type="danger"
                @click="disable_cash(scope.row)"
                >禁用</el-button
              >
              <el-button
                v-if="scope.row.re_status == 0"
                size="mini"
                type="success"
                @click="disable_cash(scope.row)"
                >使用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-col>
          <el-pagination
            ref="pagination"
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="10"
            class="page_center"
          ></el-pagination>
        </el-col>
      </el-col>
    </el-col>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      total: 0,
      page: 1,
      form: {
        money: "",
        number: "",
        term: "",
      },
      datalist: [],
      columns: [
        {
          id: "id",
          label: "编号",
          width: 150,
        },
        {
          id: "number",
          label: "代金券编码",
        },
        {
          id: "price",
          label: "代金券金额",
        },
        {
          id: "term",
          label: "代金券有效期",
        },
      ],
    };
  },
  mounted() {
    this.get_cash(this.page);
  },
  methods: {
    handleCurrentChange(e) {
      console.log(e)
      this.page = e;
      this.get_cash(this.page);
    },

    async onSubmit() {
      if (this.form.term && this.form.number && this.form.money) {
        var date = new Date(this.form.term);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());     
        this.form.term= Y+M+D
        let res = await this.$store.dispatch("create_cash", this.form);
        if (!res.code) {
          this.$message({
            type: "success",
            message: "创建成功",
          });
          this.get_cash(this.page);
        }
      } else {
        this.$message.error("请填写完整");
      }
    },

    async get_cash(page) {
      let data = {
        page:page,
      };
      let res = await this.$store.dispatch("get_cash", data);
      if (!res.code) {
        this.datalist = res.data.data;
        this.total = res.data.total;
      }
    },

    async disable_cash(row) {
      let data = {
        id: row.id,
      };
      let res = await this.$store.dispatch("disable_cash", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.get_cash(this.page);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.dragon {
  background-color: #f8f8f8;
  padding: 30px;
  text-align: left;
  .center {
    text-align: left;
  }
}
.imgsda {
  width: 375px;
  height: 250px;
}
.tit {
  padding: 30px;
  display: flex;
  align-items: center;
}

.page_center{
  margin:24px 0px 64px;
}
</style>